<template>
  <div class="container" ref="container">
    <div class="container-top">
      <div class="container-top-logo" @click="goToHome">
        <img class="logo-img"
          src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png" alt=""
          srcset="">
      </div>
      <div @click="goToDownload" class="container-top-title">
        <span>打开APP</span>
      </div>
    </div>
    <div class="container-top-one">
      <div class="container-top-introduce">
        <div class="container-top-introduce-left">
          <img :src='`${imgUrl}${detailTopData?.albumDetailInfo.albumInfo?.cover}`' alt="">
          <span class="right-icon">精品</span>
          <el-icon class="elIcon">
            <Headset />
          </el-icon>
          <span class="bottom-icon">{{ detailTopData?.albumDetailInfo.statCountInfo.playCount }}</span>
        </div>
        <img class="img1"
          src="https://award.xmcdn.com/yx/ximalaya-mobile/last/dist/images/listen_pic_album@3x_d18f4f7.png" alt="">
        <div class="container-top-introduce-right">
          <h1 class="header-text">{{ detailTopData?.albumDetailInfo.albumInfo?.title }}</h1>
          <a href="#">
            <img class="author-icon" :src='`${imgUrl}${anchorInfo?.logo}`' alt="">
            <span class="author-name">{{ anchorInfo?.nickname }}</span>
          </a>
          <p class="author-sub">
            <span class="author-sub-count">已订阅{{ detailTopData?.albumDetailInfo.statCountInfo.subscribeCount }}人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="container-top-one-base">
      <img class="base-img" :src='`${imgUrl}${detailTopData?.albumDetailInfo.albumInfo?.cover}`' alt="">
    </div>
    <div class="container-top-details">
      <div class="container-top-details-one" :class="{ 'isHidden': isCheck }" ref="htmlText"></div>
      <div class="container-top-details-two" :class="{ 'isNoHidden': !isCheck }">
        <el-icon @click="detailBlock" class="ArrowDownBold-icon">
          <ArrowDownBold />
        </el-icon>
      </div>

    </div>
    <div @click="goToDownload" class="downLoad-img3">
      <div class="downLoad-img3-content">
        <text>打开APP,完整收听</text>
      </div>
    </div>
    <div class="container-top-details-program">
      <div class="container-top-details-program-title">
        <h2>节目({{ programCount }})</h2>
        <span class="title-btn" @click="goSwitch">
          <el-icon class="title-sort-icon">
            <Sort />
          </el-icon>
          切换顺序
        </span>
      </div>
      <ul>
        <li>
          <a href="">
            <div class="container-top-details-program-list-detail" v-for="item in programList">
              <van-icon class="van-circle" name="play-circle-o" />
              <p class="container-top-details-program-list-title">{{ item.trackInfo.title }}</p>
              <svg t="1704848981341" class="icon icon-circle" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5961" width="200" height="200">
                <path d="M926.9 944h-832V176H352v64H158.9v640h704V240H672v-64h254.9z" p-id="5962" fill="#bfbfbf"></path>
                <path d="M512 709L331 528l45.2-45.2L512 618.5l135.8-135.7L693 528z" p-id="5963" fill="#bfbfbf"></path>
                <path d="M479.964 632.236v-544h64v544z" p-id="5964" fill="#bfbfbf"></path>
              </svg>
            </div>
          </a>
        </li>
      </ul>
      <div class="container-top-details-bottom">
        <p>加载更多</p>
        <svg t="1704853350937" class="icon arrow-icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="7277" width="16" height="16">
          <path
            d="M520.4992 797.696l467.456-459.776c7.2704-7.168 7.3728-18.8416 0.2048-26.0096-7.168-7.2704-18.8416-7.3728-26.0096-0.2048L507.6992 758.6816 54.8864 305.8688c-7.168-7.168-18.8416-7.168-26.0096 0-3.584 3.584-5.4272 8.2944-5.4272 13.0048 0 4.7104 1.8432 9.4208 5.4272 13.0048L494.592 797.5936C501.6576 804.7616 513.2288 804.7616 520.4992 797.696z"
            fill="#FF9000" p-id="7278"></path>
        </svg>
      </div>
    </div>
    <div class="container-anchor">
      <h2 class="container-anchor-h2">主播信息</h2>
      <div class="container-anchor-information">
        <a href="#">
          <img class="head-sculpture" :src='`${imgUrl}${anchorInfo?.logo}`' alt="" srcset="">
          <span class="head-vip">V{{ anchorInfo?.anchorGrade }}</span>
        </a>
        <div class="container-anchor-information-use">
          <a href="#">
            <h4 class="anchor-use-name">{{ anchorInfo?.nickname }}</h4>
            <p class="anchor-use-brief">
              {{ anchorInfo?.personalSignature }}
            </p>
            <p class="anchor-use-fans">
              <svg t="1704856851143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="9617" width="16" height="16">
                <path
                  d="M841.6 576c60.8-32 99.2-92.8 99.2-163.2 0-102.4-83.2-185.6-185.6-185.6-102.4 0-185.6 83.2-185.6 185.6 0 70.4 41.6 134.4 99.2 163.2-32 12.8-64 28.8-89.6 51.2-3.2-3.2-6.4-9.6-9.6-12.8-38.4-44.8-89.6-80-147.2-96 70.4-35.2 118.4-108.8 118.4-192a214.4 214.4 0 0 0-428.8 0c0 83.2 48 156.8 118.4 192-131.2 41.6-224 163.2-224 307.2v3.2h38.4v-3.2c0-156.8 128-281.6 281.6-281.6 86.4 0 166.4 38.4 217.6 102.4 9.6 9.6 16 22.4 22.4 35.2 25.6 41.6 41.6 92.8 41.6 147.2v3.2h38.4v-3.2c0-60.8-16-115.2-44.8-163.2 41.6-38.4 92.8-60.8 153.6-60.8 124.8 0 224 99.2 224 224v3.2h38.4v-3.2c0-118.4-73.6-217.6-176-252.8zM150.4 329.6c0-96 80-176 176-176s176 80 176 176-80 176-176 176c-96-3.2-176-80-176-176zM608 412.8c0-80 64-147.2 147.2-147.2 80 0 147.2 64 147.2 147.2 0 80-64 147.2-147.2 147.2-80 0-147.2-67.2-147.2-147.2z"
                  fill="#cdcdcd" p-id="9618"></path>
              </svg>
              <span>57.78万</span>
            </p>
          </a>
        </div>
        <a href="#">
          <svg t="1704856577142" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="8329" width="32" height="32">
            <path
              d="M997.050207 862.311477 862.314037 862.311477 862.314037 997.047647C862.314037 1011.922519 850.241677 1023.99488 835.366804 1023.99488 820.491932 1023.99488 808.419571 1011.922519 808.419571 997.047647L808.419571 862.311477 673.683403 862.311477C658.808529 862.311477 646.736168 850.239117 646.736168 835.364244 646.736168 820.489372 658.808529 808.417011 673.683403 808.417011L808.419571 808.417011 808.419571 673.680843C808.419571 658.805969 820.491932 646.733608 835.366804 646.733608 850.241677 646.733608 862.314037 658.805969 862.314037 673.680843L862.314037 808.417011 997.050207 808.417011C1011.925079 808.417011 1023.99744 820.489372 1023.99744 835.364244 1023.99744 850.239117 1011.925079 862.311477 997.050207 862.311477ZM512 646.733608 404.211065 646.733608C216.415794 646.733608 63.598031 794.59308 54.759339 980.205625L47.483586 980.205625C51.310092 984.84055 53.897028 990.553363 53.897028 997.047647 53.897028 1011.922519 41.824667 1023.99488 26.949793 1023.99488 12.074921 1023.99488 0.00256 1011.922519 0.00256 997.047647 0.00256 990.553363 2.589494 984.84055 6.416002 980.205625L0.864872 980.205625C9.757458 764.843334 186.666048 592.839141 404.211065 592.839141L512 592.839141C583.517958 592.839141 650.481834 611.729152 708.687859 644.335304 690.633212 653.793784 674.114557 665.731408 659.509157 679.717022 614.668961 658.779022 564.816578 646.733608 512 646.733608ZM458.644478 538.944673 457.566588 538.944673C323.908308 538.944673 215.580429 430.616794 215.580429 296.958515L215.580429 241.986158C215.580429 108.327879 323.908308 0 457.566588 0L458.644478 0C592.302756 0 700.630636 108.327879 700.630636 241.986158L700.630636 296.958515C700.630636 430.616794 592.302756 538.944673 458.644478 538.944673ZM646.736168 242.525103C646.736168 138.347097 562.283538 53.894468 458.105532 53.894468 353.927527 53.894468 269.474897 138.347097 269.474897 242.525103L269.474897 296.419571C269.474897 400.597576 353.927527 485.050207 458.105532 485.050207 562.283538 485.050207 646.736168 400.597576 646.736168 296.419571L646.736168 242.525103Z"
              fill="#e67d28" p-id="8330"></path>
          </svg>
          <p class="anchor-use-follow">加关注</p>
        </a>
      </div>
      <div class="container-anchor-work">
        <a class="container-anchor-work-a" href="#" v-for="item in anchorProgramData">
          <div class="container-anchor-work-top">
            <img class="work-img" :src="`${imgUrl}${item.albumInfo.cover}`" alt="">
            <div class="work-assembly">
              <svg t="1704873346694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="11952" width="16" height="16">
                <path
                  d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
                  fill="#cdcdcd" p-id="11953"></path>
              </svg>
              {{ item.statCountInfo.playCount }}
            </div>
          </div>
          <div class="container-anchor-work-bottom">
            <p class="work-bottom-text">{{ item.albumInfo.title }}</p>
          </div>
        </a>
      </div>
    </div>
    <div class="container-user-comment" :class="{ 'isHiddenComment': isCheck1 }">
      <div class="container-user-comment-detail">
        <h4 class="container-user-comment-detail-title">用户评论</h4>
        <ul class="container-user-comment-detail-list">
          <li class="container-user-comment-detail-item" v-for="item in userCommentData">
            <span class="container-user-comment-detail-item-left">
              <img class="item-left-img" :src="`${imgUrl}${item.smallHeader}`" alt="">
            </span>
            <div class="container-user-comment-detail-item-right">
              <span class="container-user-comment-detail-username">{{ item.nickname }}</span>
              <p class="container-user-comment-detail-content">{{ item.content }}</p>
              <div class="container-user-comment-detail-bottom">
                <div>
                  <a href="#">回复</a>
                  <span>{{ $formatDate(item.createdAt) }}</span>
                </div>
                <div>
                  <a href="#" style="font-size: 12px; vertical-align: top;">{{ item.likes }}</a>
                  <svg t="1704934823022" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2271" width="16" height="16">
                    <path
                      d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                      p-id="2272" fill="#cdcdcd"></path>
                  </svg>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div @click="commentBlock" :class="{ 'isNoHidden': !isCheck1 }" class="container-user-comment-mask">
        <svg t="1704940361257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3667" width="16" height="16">
          <path
            d="M819.627 151.467a34.133 34.133 0 1 1 48.213 48.213L535.893 531.627a34.133 34.133 0 0 1-48.213 0L156.16 199.68a34.133 34.133 0 1 1 48.213-48.213L512 459.093z m0 341.333a34.133 34.133 0 1 1 48.213 48.213L535.893 872.96a34.133 34.133 0 0 1-48.213 0L156.16 541.013a34.133 34.133 0 0 1 48.213-48.213L512 800.427z"
            fill="#e67d28" p-id="3668"></path>
        </svg>
      </div>
    </div>
    <a  @click="goToDownload" class="container-user-comment-more">查看更多评论</a>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { getDetailTopData, getDetailProgramData, getDetailAnchorData, getDetailAnchorProgramData, getDetailCommentData } from '@/api/datail';
// 用于存储听单数据
const detailTopData = ref();
// 用于存储图片地址的基础路径
const imgUrl = ref('https://imagev2.xmcdn.com/');
// 用于存储订单介绍的数据
const htmlText = ref();
// 用于存储节目列表
const programList = ref();
// 用于存储节目数量
const programCount = ref();
// 用于存储路由携带的听单id
const route = useRoute();
const router = useRouter();
let queryId = route.query.categoryid;
// 用于存储主播id
const anchorId = ref()
// 用于存储主播信息
const anchorInfo = ref();
// 用于存储主播作品的数据
const anchorProgramData = ref();
// 用于存放用户评论的数据
const userCommentData = ref();
// 定义一个13位的随机数
const random13Digits = Math.floor(Math.random() * 9000000000000) + 1000000000000;
// 用于控制数据的显示和隐藏
const isCheck = ref<boolean>(true);
const isCheck1 = ref<boolean>(true);
const container = ref();

// 点击logo回到首页
const goToHome = () => {
  router.push('/home');
}

// 跳转至下载路径
const goToDownload = () => {
  router.push('/download');
}

// 生命周期
onMounted(() => {
  getDetailTopDataFn();
  getDetailProgramDataFn();
  getDetailUserCommentDataFn();
  // 滚动到页面顶部
  document.documentElement.scrollTop = 0;
})

/**
* @author: 马赛飞
* @Description: 获取详情页顶部数据
* @param: 
*/


async function getDetailTopDataFn() {

  // console.log(queryId);
  let result = await getDetailTopData(queryId);
  if (result.ret === 0) {
    // console.log(result.data);
    detailTopData.value = result.data;
    // console.log(detailTopData.value?.albumDetailInfo.statCountInfo.playCount);
    // 存储听单详情介绍的整个HTML标签
    htmlText.value.innerHTML = detailTopData.value?.albumRichInfo.richIntro;
    // console.log(detailTopData.value?.albumDetailInfo);

    // console.log(detailTopData.value?.albumDetailInfo.albumInfo.anchorId);
    getDetailAnchorDataFn();
  } else {
    console.log('请求失败');
  }
}
const detailBlock = () => {
  isCheck.value = false;
  // console.log(isCheck.value);
}

const commentBlock = () => {
  isCheck1.value = false;
  // console.log(isCheck.value);
}

/**
* @author: 马赛飞
* @Description: 获取节目列表的功能函数
* @param: 
*/
// 定义请求函数
const queryProgramDataFn = {
  AlbumId: queryId,
  page: 1,
  pageSize: 7,
  asc: true,
  countKeys: 'play,comment',
  v: random13Digits
}
const getDetailProgramDataFn = async () => {
  let result = await getDetailProgramData(queryProgramDataFn);
  if (result.ret === 0) {
    programList.value = result.data.trackDetailInfos;
    // console.log(result.data);
    programCount.value = result.data.totalCount;
  }

}

/**
 * 点击切换节目列表顺序的功能函数
 */
const goSwitch = () => {
  queryProgramDataFn.asc = !queryProgramDataFn.asc;
  getDetailProgramDataFn();
}

/**
* @author: 马赛飞
* @Description: 获取主播信息数据的功能函数
* @param: 
*/
const getDetailAnchorDataFn = async () => {
  anchorId.value = detailTopData.value?.albumDetailInfo.albumInfo.anchorId;
  let result = await getDetailAnchorData(anchorId.value);
  if (result.ret === 0) {
    anchorInfo.value = result.data.userInfo;
    // console.log(anchorInfo.value);
    // console.log(result.data);
  }
  getDetailAnchorWorkDataFn();

}

/**
* @author: 马赛飞
* @Description: 获取主播作品数据的功能函数
* @param: 
*/
const getDetailAnchorWorkDataFn = async () => {
  // 定义请求参数
  const queryAnchorWorkDataFn = {
    anchorId: anchorId.value,
    page: 1,
    pageSize: 3,
    asc: false
  }
  // console.log(queryAnchorWorkDataFn);
  let result = await getDetailAnchorProgramData(queryAnchorWorkDataFn);
  if (result.ret === 0) {
    anchorProgramData.value = result.data.albumBriefDetailInfos;
  }
  // console.log(result);
}

/**
* @author: 马赛飞
* @Description: 获取用户评论数据的功能函数
* @param: 
*/
const getDetailUserCommentDataFn = async () => {
  // console.log(detailTopData.value);

  // 定义请求参数
  const queryUserCommentDataFn = {
    albumId: queryId,
    page: 1,
    pageSize: 10,
    v: random13Digits
  }
  // console.log(queryUserCommentDataFn);
  let result = await getDetailCommentData(queryUserCommentDataFn);
  if (result.ret === 0) {
    userCommentData.value = result.data.comments;
    // console.log(userCommentData.value);
  }
  // console.log(result);
}

</script>

<style lang="less" scoped>
a {
  color: #666;
}

// 控制听单详情介绍的显示与隐藏
.isHidden {
  overflow: hidden;
  height: 160px;
}

.isNoHidden {
  opacity: 0;
}

// 控制用户评论的显示与隐藏
.isHiddenComment {
  overflow: hidden;
  height: 300px;
}

.container {
  width: 100%;
  position: relative;

  .container-top {
    display: flex;
    height: 58px;
    justify-content: space-between;
    // line-height: 58px;
    background-color: rgba(34, 35, 37, .8);
    align-items: center;
    box-sizing: border-box;

    .container-top-logo {
      width: 116px;
      height: 29px;
      margin-left: 10px;

      .logo-img {
        width: 116px;
        height: 29px;
      }
    }

    .container-top-title {
      width: 88px;
      height: 30px;
      line-height: 30px;
      background: #fa2800;
      text-align: center;
      font-size: 14px;
      border-radius: 20px;
      color: #f0f0f0;
      margin-right: 10px;
    }
  }

  .container-top-one {
    height: 120px;
    background-color: rgba(0, 0, 0, .6);
    position: relative;
    padding: 30px 20px 20px;
    // background: #484a60;
    overflow: hidden;
    z-index: 10;


    .container-top-introduce {
      display: flex;
      width: 335px;
      height: 118px;
      // background-color: aquamarine;

      .container-top-introduce-left {
        position: relative;
        background-color: azure;
        width: 95px;
        height: 95px;

        img {
          width: 95px;
          height: 95px;
        }

        .right-icon {
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          padding-left: 4px;
          width: 32px;
          height: 15px;
          font-size: 12px;
          color: aliceblue;
          background-image: linear-gradient(112deg, #c68953 0, #e3b890 54%, #fbd4ac 100%);
        }

        .elIcon {
          position: absolute;
          top: 75px;
          left: 20px;
          width: 12px;
          height: 18px;
          color: aliceblue;
        }

        .bottom-icon {
          position: absolute;
          top: 75px;
          left: 35px;
          width: 55px;
          height: 18px;
          color: aliceblue;
          font-size: 16px;
          font-weight: 700;
        }
      }

      .img1 {
        height: 90px;
      }

      .container-top-introduce-right {
        width: 215px;
        margin-left: 10px;
        margin-top: -10px;

        .header-text {
          font-weight: 500;
          font-size: 17px;
          color: #fff;
          line-height: 23px;
        }

        .author-icon {
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
        }

        .author-name {
          padding-left: 6px;
          vertical-align: middle;
          font-size: 12px;
          color: rgba(255, 255, 255, .81);
        }

        .author-sub {
          width: 215px;
          border-top: 1px solid #fff;
          // padding-top: 10px;

          .author-sub-count {
            // display: inline-block;
            // margin: 0 auto 10px 0;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }

  .container-top-one-base {
    position: absolute;
    top: 58px;
    height: 170px;
    width: 100%;
    z-index: -1;
    overflow: hidden;

    .base-img {
      height: 170px;
      width: 100%;
      filter: blur(5px);
    }
  }

  .container-top-details {
    position: relative;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;

    .container-top-details-one {
      min-height: 160px;

      ::v-deep(img) {
        width: 100%;
      }
    }

    .container-top-details-two {
      text-align: center;
      position: absolute;
      line-height: 160px;
      top: 15px;
      left: 0;
      height: 160px;
      width: 100%;
      background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 34%, rgba(255, 255, 255, 0.95) 66%, #fff 100%);
      // background-color: #c68953;
      z-index: 99;

      .ArrowDownBold-icon {
        color: #e67113;
      }

    }
  }

  .downLoad-img3 {
    // 设置外边距
    margin-top: 45px;
    // 设置背景图片
    background-image: linear-gradient(-269deg, #ff8b70 2%, #f86442 99%);
    // 设置块级元素
    display: block;
    // 设置宽度
    width: 235px;
    // 设置居中
    margin: 0 auto;
    // 设置文字颜色
    color: #fff;
    // 设置字体大小
    font-size: 15px;
    // 设置行高
    line-height: 1.4;
    // 设置圆角
    border-radius: 100px;
    // 设置动画
    animation: popopen 1.2s infinite alternate linear;

    @keyframes popopen {
      from {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      to {
        transform: scale(1);
      }
    }

    .downLoad-img3-content {
      // 设置块级元素
      display: block;
      // 设置宽度
      width: 160px;
      // 设置高度
      height: 46px;
      // 设置行高
      line-height: 46px;
      // 设置居中
      margin: 0 auto;

      // 设置盒模型
      box-sizing: border-box;
      // 设置文本居中
      text-align: center;

    }
  }


  .container-top-details-program {
    width: 100%;
    // height: 606px;
    box-sizing: border-box;
    // background-color: palegoldenrod;
    padding: 10px;

    .container-top-details-program-title {
      display: flex;
      justify-content: space-between;
      height: 25px;
      // margin-bottom: 10px;

      &:nth-child(1) {
        font-size: 15px;
        line-height: 1.39;
        color: #333;
      }

      .title-btn {
        font-size: 14px;
        color: #999;
        letter-spacing: 1px;
        line-height: 1.6;

        .title-sort-icon {
          margin-right: -5px;
        }
      }
    }

    .container-top-details-program-list-detail {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      height: 76px;

      &:first-child {
        margin-top: 10px;
      }

      // background-color: #e67113;
      // border-bottom: 1px solid #dbdbdb;
      .van-circle {
        width: 30px;
        height: 30px;
        color: #999;
      }

      .container-top-details-program-list-title {
        font-size: 18px;
        // width: 52px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #333;
        // margin: 0 10px;
        line-height: 1.5;
        margin-right: auto;
      }

      .icon-circle {
        // display: flex;
        width: 20px;
        height: 20px;
        margin-top: 20px;
      }
    }

    .container-top-details-bottom {
      display: flex;
      // display: block;
      justify-content: center;
      // padding: 17px 0;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 700;
      color: #f86442;
      height: 56px;
    }
  }

  .container-anchor {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    padding: 15px;
    // background-color: paleturquoise;

    .container-anchor-h2 {
      font-family: PingFangSC-Semibold;
      font-size: 18px;
      line-height: 1.39;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px;
    }


    .container-anchor-information {
      display: flex;
      position: relative;

      .head-sculpture {

        width: 54px;
        height: 54px;
        background-color: #999;
        border-radius: 50%;
      }

      .head-vip {
        position: absolute;
        left: 13px;
        top: 40px;
        cursor: pointer;
        padding-top: 0px;
        font-size: 14px;
        color: #f0f0f0;
        background-color: #f86442;
        border-radius: 10px;
        font-weight: 700;
        width: 30px;
        text-align: center;
      }

      .container-anchor-information-use {
        width: 250px;
        height: 54px;
        margin-left: 5px;

        .anchor-use-name {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          line-height: 22px;
          margin-bottom: 2px;
          color: #333;

        }

        .anchor-use-brief {
          width: 220px;
          padding-right: 22px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          line-height: 17px;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .anchor-use-fans {
          padding-top: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          line-height: 17px;
          color: #bbb;
          letter-spacing: 0;
        }
      }

      .anchor-use-follow {
        padding-top: 3px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #f86442;
        line-height: 11px;
      }
    }

    .container-anchor-work {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;

      .container-anchor-work-a {
        display: block;
        width: 90px;
        height: 143px;
        // background-color: #999;

        .container-anchor-work-top {
          position: relative;

          .work-img {
            width: 90px;
            height: 90px;
            // background-color: #e3b890;
          }

          .work-assembly {
            position: absolute;
            bottom: 0;
            left: 0;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            line-height: 17px;
            color: #fff;
            letter-spacing: .34px;
            vertical-align: middle;
          }
        }

        .container-anchor-work-bottom {
          // padding: 6px 0 11px 0;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          line-height: 18px;
          height: 35px;
          overflow: hidden;
          // white-space: nowrap;
          text-overflow: ellipsis;
          box-sizing: border-box;
          color: #333;
          letter-spacing: .34px;
          // background-color: #f86442;

          .work-bottom-text {}
        }

      }
    }
  }

  .container-user-comment {
    position: relative;
    width: 100%;
    min-height: 300px;
    // background-color: #e67113;
    padding: 15px;
    box-sizing: border-box;
    // overflow: hidden;

    .container-user-comment-detail {

      .container-user-comment-detail-title {
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        line-height: 1.39;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
      }

      .container-user-comment-detail-item {
        // 字体
        font-family: PingFangSC-Regular;
        // 字体大小
        font-size: 14px;
        // 设置元素为块级元素
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        // 设置元素垂直排列方式
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        // 设置元素水平排列方式
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        // justify-content: space-between;
        margin-bottom: 20px;

        .container-user-comment-detail-item-left {
          .item-left-img {
            width: 35px;
            height: 35px;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            margin-right: 9px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #f0f0f0;
          }
        }

        .container-user-comment-detail-item-right {
          .container-user-comment-detail-username {
            line-height: 20px;
            margin-bottom: 4px;
            color: #666;
            display: inline-block;
          }

          .container-user-comment-detail-content {
            color: #333;
            line-height: 23.5px;
          }

          .container-user-comment-detail-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          }
        }
      }
    }

    .container-user-comment-mask {
      text-align: center;
      line-height: 250px;
      position: absolute;
      top: 150px;
      left: 0;
      width: 100%;
      height: 150px;
      background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 34%, rgba(255, 255, 255, 0.95) 66%, #fff 100%);
    }
  }

  .container-user-comment-more {
    display: block;
    width: 245px;
    margin: 30px auto 0;
    padding: 10px 0;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 20px;
    color: #fe7959;
    text-align: center;
  }
}</style>